<style scoped>
.container {
	padding: 16px;
	/* border: 1px solid #efefef; */
}

.el-select .el-select--small {
	display: block !important;
}
</style>

<!-- 页面布局-->
<template>
	<div class="table">
		<!-- 标题导航栏 -->
		<div class="title-box crumbs">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item>
					<i class="el-icon-tickets"></i>个人中心
				</el-breadcrumb-item> 
				<el-breadcrumb-item>个人信息</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<!-- 标题导航栏END -->
		<!-- 主体区 -->
		<div class="container">
			<!-- 表单区 -->
			<div class="form-data-box">
				<el-form
					:model="formBean"
					:rules="validateRules"
					ref="form1"
					label-width="100px"
					class="ruleForm">
					<el-row>
						<el-col :span="24">
							<el-form-item label="登录名" prop="username">
								<el-input :readonly="true" v-model="formBean.username"></el-input>
							</el-form-item>
						</el-col>
						<!-- <el-col :span="24">
							<el-form-item label="密码" prop="pass">
								<el-input type="password" :readonly="readOnly" v-model="formBean.pass"></el-input>
							</el-form-item>
						</el-col> -->
					</el-row>
					<el-row>
						<el-col :span="24">
							<el-form-item label="邮箱" prop="email">
								<el-input :readonly="readOnly" v-model="formBean.email"></el-input>
							</el-form-item>
						</el-col>
						<!-- <el-col :span="12">
							<el-form-item label="用户状态" prop="state">
								<el-select :disabled="readOnly" v-model="formBean.state" placeholder="请选择状态">
									<el-option label="停用" value="0"></el-option>
									<el-option label="启用" value="1"></el-option>
								</el-select>
							</el-form-item>
						</el-col>-->
					</el-row>
					<el-row>
						<el-col :span="24">
							<el-form-item label="用户类型" prop="type">
								<el-select :disabled="true" v-model="formBean.type" placeholder="请选择">
									<el-option
										v-for="item in dicts.usertype"
										:key="item.code"
										:label="item.name"
										:value="item.code"
									></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<!-- <el-col :span="12">
							<el-form-item label="姓名" prop="name">
								<el-input :readonly="readOnly" v-model="formBean.name"></el-input>
							</el-form-item>
						</el-col>-->
						<el-col :span="24">
							<el-form-item label="个人简介" prop="addr">
								<el-input :readonly="readOnly" v-model="formBean.addr"></el-input>
							</el-form-item>
						</el-col>
					</el-row>
					<!-- <el-row>
						<el-col :span="12">
							<el-form-item label="手机" prop="mobile">
								<el-input :readonly="readOnly" v-model="formBean.mobile"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="证件类型" prop="certype">
								<el-select :disabled="readOnly" v-model="formBean.certype" placeholder="请选择">
									<el-option
										v-for="item in dicts.certype"
										:key="item.code"
										:label="item.name"
										:value="item.code"
									></el-option>
								</el-select>
							</el-form-item>
						</el-col>
					</el-row>-->
					<!-- <el-row>
						<el-col :span="12">
							<el-form-item label="证件编号" prop="cercode">
								<el-input :readonly="readOnly" v-model="formBean.cercode"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="人员编号" prop="workercode">
								<el-input :readonly="readOnly" v-model="formBean.workercode"></el-input>
							</el-form-item>
						</el-col>
					</el-row>-->
					<el-row>
						<el-col :span="24">
							<el-form-item label="机构名称" prop="orgcode">
								<el-select :disabled="orgNotsele" v-model="orgid" placeholder="请选择">
									<el-option
										v-for="item in dicts.serorg"
										:key="item.orgid"
										:label="item.orgname"
										:value="item.orgid"
									></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="12"></el-col>
					</el-row> 
					<el-row>
						<el-col :span="24">
							<el-form-item label="注册时间" prop="cercode">
								<el-input :readonly="true" v-model="formBean.crttime"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="24">
							<el-form-item label="上次登录时间" prop="workercode">
								<el-input :readonly="true" v-model="formBean.lastlogtime"></el-input>
							</el-form-item>
						</el-col>
					</el-row>

				</el-form>
			</div>
			<!-- 表单区END -->
			<!-- 按钮操作区 -->
			<span slot="footer" class="form-btn-box">
				<!-- <el-button v-if="!readOnly" @click="resetForm('form1')">重 置</el-button> -->
				<el-button
					v-if="!readOnly"
					type="primary"
					@click="submitForm('form1')"
					v-loading.fullscreen.lock="fullscreenLoading"
				>确 定</el-button>
				<!-- <el-button @click="cnacelForm('form1')">取 消</el-button> -->
			</span>
			<!-- 按钮操作区END -->
		</div>
		<!-- 主体区END -->
	</div>
</template>
<script>
export default {
	data() {
		return {
			// 提交表单的loading设置标识
			fullscreenLoading: false,
			firstLoadedData: "{}",
			// 新增用户表单信息
			formBean: {
				userid: "", //userid
				username: "", //用户名
				pass: "", //密码
				type: "", //用户类型
				name: "", //姓名
				mobile: "", //手机
				certype: "", //证件类型
				cercode: "", //证件编号
				workercode: "", //人员编号
				addr: "", //地址
				state: "", //用户状态
				userimg: "", //头像
				email: ""
			},
			orgid: "",
			orgNotsele:true,
			// 表单校验规则
			validateRules: {
				userid: [{ required: true, message: "请输入userid", trigger: "blur" }],
				username: [
					{ required: true, message: "请输入用户名", trigger: "blur" }
				],
				pass: [{ required: true, message: "请输入密码", trigger: "blur" }],
				type: [{ required: true, message: "请输入用户类型", trigger: "blur" }],
				name: [{ required: false, message: "请输入姓名", trigger: "blur" }],
				mobile: [{ required: false, message: "请输入手机", trigger: "blur" }],
				email: [{ required: true, message: "请输入EMAIL", trigger: "blur" }],
				certype: [
					{ required: false, message: "请输入证件类型", trigger: "blur" }
				],
				cercode: [
					{ required: false, message: "请输入证件编号", trigger: "blur" }
				],
				workercode: [
					{ required: false, message: "请输入人员编号", trigger: "blur" }
				],
				addr: [{ required: false, message: "请输入地址", trigger: "blur" }],
				state: [
					{ required: false, message: "请输入用户状态", trigger: "blur" }
				],
				userimg: [{ required: false, message: "请输入头像", trigger: "blur" }],
				orgcode: [
					{ required: false, message: "请输入机构名称", trigger: "blur" }
				]
			},
			//所选记录id
			selectedId: "",
			//事物类型
			actType: "",
			// 表单只读状态
			readOnly: false,
			readOnlyEdt: false,
			//字典集
			dicts: {},
			cascaders: {},
			cascaderSelected: {},
			firstOrgid: ""
		};
	},
	// 进入页面加载数据
	mounted() {
		this.handleInitLoad();
	},
	methods: {
		/**
		 * 初始加载字典选项
		 */
		initSelectOptoins() {
			this.loadSelectOptoins("usertype", null);
			this.loadSelectOptoins("certype", null);
			this.loadSelectOptoins("serorg", null);
		},

		/**
		 * 通用定义:下拉字典
		 *  @augments dictKind 字典类型
		 */
		loadSelectOptoins(dictKind, params) {
			this.$dicts
				.loadDict(this.httpRoot.BASEURL_UIM, params, dictKind)
				.then(res => {
					this.$set(this.dicts, dictKind, res);
				});
		},

		/**
		 * 通用定义:级联下拉字典
		 *  @augments dictKind 字典类型
		 *  @augments valu 初始值
		 */
		loadCascadeOptions(dictKind, params, valu) {
			this.$dicts
				.loadCascade(this.httpRoot.BASEURL_UIM, params, dictKind)
				.then(res => {
					this.$set(this.cascaders, dictKind, res);
					setTimeout(() => {
						let option = this.$dicts.resetCascadeValue(
							this.cascaders,
							dictKind,
							valu
						);
						this.$set(this.cascaderSelected, dictKind, option);
					}, 1000);
				});
		},

		/**
		 *  级联字典事件
		 */
		handleCascadeChange(value) {
			//this.formBean.equtype = value[value.length - 1];
		},

		/**
		 * 组件初始化加载
		 */
		handleInitLoad() {
			this.initSelectOptoins();
			this.initFormData();
		},

		/**
		 * 取消返回
		 * @augments formName 表单名称
		 */
		cnacelForm(formName) {
			this.$refs[formName].resetFields();
			// this.$router.push({
			// 	name: "amsuserList",
			// 	params: {
			// 		type: "cancel"
			// 	}
			// });
			this.$emit("cancel", this.cancelData);
		},
		/**
		 * 重置表单
		 * @augments formName 表单名称
		 */
		resetForm(formName) {
			this.formBean = JSON.parse(this.firstLoadedData);
		},
		/**
		 *初始化加载表单数据
		 */
		initFormData() {
			this.selectedId =this.$util.getLoginer().userid ;
			this.actType = 'upd' ;
			this.readOnlyEdt = true;
			if (this.actType == "view") {
				// 查看状态 标识表单只读
				this.readOnly = true;
			} else if (this.actType == "add") {
				this.readOnly = false;
				this.readOnlyEdt = false;
				//清空修改保存之后数据还存在的情况
				for (var key in this.formBean) {
					this.formBean[key] = "";
				}
			} else {
				this.readOnly = false;
			}
			if(this.$util.getLoginer().administrator==true){
				this.orgNotsele = false ;
			}else{
				this.orgNotsele = true ;
			}
			var url = this.httpRoot.BASEURL_UIM + "rest/uim/ams/amsuser/";
			if (this.actType != null && this.actType.length > 0) {
				url += "to" + this.actType;
			}
			//查询参数
			var paramQuery = {
				loginsid: this.$util.getLoginer().sessionId,
				userid: this.selectedId
			};
			if (this.actType == "add") {//创建用户默认方式设置
				//this.formBean.type = "2";
				this.formBean.state = "1";
				this.formBean.pass = "123456";//默认密码
				this.orgid = this.$util.getLoginer().extendValues.orgid;
				this.firstOrgid = "";
				if(this.$util.getLoginer().administrator==true){
					this.formBean.type = "2";//超级管理员创建机构管理员
				}else{
					this.formBean.type = "3";//机构创建普通用户
				}
			} else {
				this.$axios
					.get(url, {
						params: paramQuery
					})
					.then(res => {
						this.formBean = {}; 
						if (res.data.result == "true") {
							this.formBean = res.data.resultData;
							this.firstLoadedData = JSON.stringify(this.formBean); 
							//加载成功后，根据用户扩展信息中的orgid,orgname 设置 当前已有的所属机构 属性
							if (JSON.stringify(res.data.resultData.extendInfos) != "{}") {
								this.orgid = res.data.resultData.extendInfos.orgid;
								this.firstOrgid = res.data.resultData.extendInfos.orgid; 
							} 
							//
						} else {
							this.$error(
								res.data.resultMessage + ",错误代码:" + res.data.resultCode
							);
						}
					})
					.catch(function(error) {});
			}
		},

		/**
		 * 提交表单
		 * @augments formName 表单名称
		 */
		submitForm(formName) {
			//
			this.$refs[formName].validate(valid => {
				if (valid) {
					// 表单校验成功
					if (this.actType == "add" || this.actType == "upd") {
						var url = this.httpRoot.BASEURL_UIM + "rest/uim/ams/amsuser/";
						url +=
							this.actType +
							"save" +
							"?loginsid=" +
							this.$util.getLoginer().sessionId;
						//
						// 开启提交表单的loading
						this.fullscreenLoading = true;
						this.$axios
							.post(url, this.formBean)
							.then(res => {
								// 关闭提交表单的loading
								this.fullscreenLoading = false;
								if (res.data.result == "true") {
									this.formBean.userid = res.data.resultData.userid ;
									this.$message({
										message: "数据保存成功.",
										type: "success"
									});
									// this.$router.push({
									// 	path: "/amsuserList"
									// });
									//  
									// if (this.firstOrgid != this.orgid) {
									// 	this.bindOrg();
									// } else {
									// 	this.$emit("ok", {});
									// }
								} else {
									this.$error(
										res.data.resultMessage + ",错误代码:" + res.data.resultCode
									);
								}
							})
							.catch(function(error) {
								this.fullscreenLoading = false;
							});
					}
				} else {
					// 表单校验失败
					// this.$error("数据校验失败.");
				}
			});
		},

		//绑定所选机构
		bindOrg() {
			if (this.formBean.type == "2" || this.formBean.type == "3") {//
				var params = {
					loginsid: this.$util.getLoginer().sessionId,
					userid: this.formBean.userid,
					usertype: this.formBean.type, //用户类型
					bindtype: "serorg",
					binds: this.orgid, //当前机构选择值
					unbinds: this.firstOrgid //之前旧的机构值
				};
				var url =
					this.httpRoot.BASEURL_UIM + "rest/uim/ams/amsuser/saveuserbinds";
				this.$axios
					.post(url, params)
					.then(res => {
						// 关闭提交表单的loading
						this.fullscreenLoading = false;
						if (res.data.result == "true") {
							this.$message({
								message: "数据保存成功.",
								type: "success"
							});
							this.$emit("ok", {});
						} else {
							this.$error(
								res.data.resultMessage + ",错误代码:" + res.data.resultCode
							);
						}
					})
					.catch(function(error) {
						this.fullscreenLoading = false;
					});
			}
		}
	}
};
</script>
